﻿@{
    ViewBag.Title = "高级控件";
}

@section Style{
    @Styles.Render("~/Content/Flat/Css/Advanced_Form_Components")
}

@section Script{
    @Scripts.Render("~/Content/Flat/Js/Advanced_Form_Components")

    <script>

      jQuery(document).ready(function(){

          $('.summernote').summernote({
              height: 200,                 // set editor height

              minHeight: null,             // set minimum height of editor
              maxHeight: null,             // set maximum height of editor

              focus: true                 // set focus to editable area after initializing summernote
          });
      });

    </script>
}

<!--main content start-->
<section id="main-content">
    <section class="wrapper">
        <!-- page start-->
        <!--multiple select start-->
        <div class="row">
            <div class="col-md-12">
                <section class="panel">
                    <header class="panel-heading">
                        多选
                        <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                        </span>
                    </header>
                    <div class="panel-body">
                        <form action="#" class="form-horizontal tasi-form">
                            <div class="form-group">
                                <label class="control-label col-md-3">默认</label>
                                <div class="col-md-9">
                                    <select multiple="multiple" class="multi-select" id="my_multi_select1" name="my_multi_select1[]">
                                        <option value="BJ">北京</option>
                                        <option value="SH">上海</option>
                                        <option value="HZ" selected="selected">杭州</option>
                                        <option value="CQ" selected="selected">重庆</option>
                                        <option value="WH">武汉</option>
                                        <option value="CD">成都</option>
                                        <option value="SD">山东</option>
                                        <option value="SX">山西</option>
                                        <option value="SHX" selected="selected">陕西</option>
                                        <option value="SC">四川</option>
                                        <option value="XJ">新疆</option>
                                        <option value="XZ">西藏</option>
                                        <option value="GZ">广州</option>
                                        <option value="SZ">深圳</option>
                                        <option value="DG">东莞</option>
                                        <option value="XG">香港</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">分组下拉框</label>
                                <div class="col-md-9">
                                    <select multiple="multiple" class="multi-select" id="my_multi_select2" name="my_multi_select2[]">
                                        <optgroup label="BJ-北京">
                                            <option>CY-朝阳区</option>
                                            <option>DC-东城区</option>
                                            <option>XC-西城区</option>
                                            <option>FT-丰台区</option>
                                        </optgroup>
                                        <optgroup label="CD-成都">
                                            <option>JJ-锦江区</option>
                                            <option>WH-武侯区</option>
                                            <option>JN-金牛区</option>
                                            <option>GX-高新区</option>
                                        </optgroup>
                                        <optgroup label="HZ-杭州">
                                            <option>YH-余杭</option>
                                            <option>XS-萧山</option>
                                            <option>XH-西湖</option>
                                            <option>JG-江干</option>
                                        </optgroup>
                                        <optgroup label="WH-武汉">
                                            <option>HS-洪山区</option>
                                            <option>DXH-东西湖区</option>
                                            <option>HN-汉南区</option>
                                            <option>CD-蔡甸区</option>
                                        </optgroup>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group last">
                                <label class="control-label col-md-3">可搜索的下拉框</label>
                                <div class="col-md-9">
                                    <select name="country" class="multi-select" multiple="" id="my_multi_select3">
                                        <option value="BJ">北京市</option>
                                        <option value="SH">上海市</option>
                                        <option value="TJ">天津市</option>
                                        <option value="CQ">重庆市</option>
                                        <option value="ZJ">浙江省</option>
                                        <option value="GAT">港澳台</option>
                                        <option value="HB">河北省</option>
                                        <option value="NMG">内蒙古自治区</option>
                                        <option value="LL">辽宁省</option>
                                        <option value="SHX">山西省</option>
                                        <option value="JL">吉林省</option>
                                        <option value="HLJ">黑龙江省</option>
                                        <option value="JS">江苏省</option>
                                        <option value="AH">安徽省</option>
                                        <option value="FJ">福建省</option>
                                        <option value="JX">江西省</option>
                                        <option value="SD">山东省</option>
                                        <option value="HN">河南省</option>
                                        <option value="HUB">湖北省</option>
                                        <option value="HUN">湖南省</option>
                                        <option value="HN">海南省</option>
                                        <option value="GX">广西壮族自治区</option>
                                        <option value="SC">四川省</option>
                                        <option value="GZ">贵州省</option>
                                        <option value="YN">云南省</option>
                                        <option value="XZ">西藏自治区</option>
                                        <option value="SX">陕西省</option>
                                        <option value="GS">甘肃省</option>
                                        <option value="QH">青海省</option>
                                        <option value="NX">宁夏回族自治区</option>
                                        <option value="XJ">新疆维吾尔自治区</option>
                                        <option value="GD">广东省</option>
                                    </select>
                                </div>

                            </div>
                        </form>
                    </div>
                </section>
            </div>
        </div>
        <!--multiple select end-->
        <!--date picker start-->
        <div class="row">
            <div class="col-md-12">
                <section class="panel">
                    <header class="panel-heading">
                        日期选择
                        <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                        </span>
                    </header>
                    <div class="panel-body">
                        <form action="#" class="form-horizontal tasi-form">
                            <div class="form-group">
                                <label class="control-label col-md-3">默认样式</label>
                                <div class="col-md-3 col-xs-11">
                                    <input class="form-control form-control-inline input-medium default-date-picker" size="16" type="text" value="" />
                                    <span class="help-block">选择</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">日月年</label>
                                <div class="col-md-3 col-xs-11">

                                    <div data-date-viewmode="years" data-date-format="dd-mm-yyyy" data-date="12-02-2012" class="input-append date dpYears">
                                        <input type="text" readonly="" value="12-02-2012" size="16" class="form-control">
                                        <span class="input-group-btn add-on">
                                            <button class="btn btn-danger" type="button"><i class="fa fa-calendar"></i></button>
                                        </span>
                                    </div>
                                    <span class="help-block">选择</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">月年</label>
                                <div class="col-md-3 col-xs-11">
                                    <div data-date-minviewmode="months" data-date-viewmode="years" data-date-format="mm/yyyy" data-date="102/2012" class="input-append date dpMonths">
                                        <input type="text" readonly="" value="02/2012" size="16" class="form-control">
                                        <span class="input-group-btn add-on">
                                            <button class="btn btn-danger" type="button"><i class="fa fa-calendar"></i></button>
                                        </span>
                                    </div>


                                    <span class="help-block">月</span>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-md-3">日期范围</label>
                                <div class="col-md-4">
                                    <div class="input-group input-large" data-date="13/07/2013" data-date-format="mm/dd/yyyy">
                                        <input type="text" class="form-control dpd1" name="from">
                                        <span class="input-group-addon">To</span>
                                        <input type="text" class="form-control dpd2" name="to">
                                    </div>
                                    <span class="help-block">选择</span>
                                </div>
                            </div>


                            <a class="btn btn-success" data-toggle="modal" href="#myModal">
                                模态窗口日期选择
                            </a>
                            <!-- Modal -->
                            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <h4 class="modal-title">模态窗口日期选择控件</h4>
                                        </div>
                                        <div class="modal-body">

                                            <div class="form-group">
                                                <label class="control-label col-md-3">默认</label>
                                                <div class="col-md-4">
                                                    <input size="16" type="text" value="2012-06-15 14:45" readonly class="form_datetime form-control">
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label class="control-label col-md-4">日期</label>
                                                <div class="col-md-6 col-xs-11">
                                                    <input class="form-control form-control-inline input-medium default-date-picker" size="16" type="text" value="" />
                                                    <span class="help-block">选择</span>
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label class="control-label col-md-4">日月年</label>
                                                <div class="col-md-6 col-xs-11">

                                                    <div data-date-viewmode="years" data-date-format="dd-mm-yyyy" data-date="12-02-2012" class="input-append date dpYears">
                                                        <input type="text" readonly="" value="12-02-2012" size="16" class="form-control">
                                                        <span class="input-group-btn add-on">
                                                            <button class="btn btn-danger" type="button"><i class="fa fa-calendar"></i></button>
                                                        </span>
                                                    </div>
                                                    <span class="help-block">选择</span>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-md-4">月</label>
                                                <div class="col-md-6 col-xs-11">
                                                    <div data-date-minviewmode="months" data-date-viewmode="years" data-date-format="mm/yyyy" data-date="102/2012" class="input-append date dpMonths">
                                                        <input type="text" readonly="" value="02/2012" size="16" class="form-control">
                                                        <span class="input-group-btn add-on">
                                                            <button class="btn btn-danger" type="button"><i class="fa fa-calendar"></i></button>
                                                        </span>
                                                    </div>


                                                    <span class="help-block">选择</span>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-md-4">日期范围</label>
                                                <div class="col-md-6">
                                                    <div class="input-group input-large" data-date="13/07/2013" data-date-format="mm/dd/yyyy">
                                                        <input type="text" class="form-control dpd1" name="from">
                                                        <span class="input-group-addon">To</span>
                                                        <input type="text" class="form-control dpd2" name="to">
                                                    </div>
                                                    <span class="help-block">选择</span>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="modal-footer">
                                            <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- modal -->

                        </form>
                    </div>
                </section>
            </div>
        </div>
        <!--date picker end-->
        <!--datetime picker start-->
        <div class="row">
            <div class="col-md-12">
                <section class="panel">
                    <header class="panel-heading">
                        日期时间选择
                        <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                        </span>
                    </header>
                    <div class="panel-body">
                        <form class="form-horizontal  tasi-form" action="#">
                            <div class="form-group">
                                <label class="control-label col-md-3">Default input Datetimepicker</label>
                                <div class="col-md-4">
                                    <input size="16" type="text" value="2012-06-15 14:45" readonly class="form_datetime form-control">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-md-3"> Component Datetimepicker</label>
                                <div class="col-md-4">
                                    <div class="input-group date form_datetime-component">
                                        <input type="text" class="form-control" readonly="" size="16">
                                        <span class="input-group-btn">
                                            <button type="button" class="btn btn-danger date-set"><i class="fa fa-calendar"></i></button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">Advance Datetimepicker</label>
                                <div class="col-md-4">
                                    <div data-date="2012-12-21T15:25:00Z" class="input-group date form_datetime-adv">
                                        <input type="text" class="form-control" readonly="" size="16">
                                        <div class="input-group-btn">
                                            <button type="button" class="btn btn-danger date-reset"><i class="fa fa-times"></i></button>
                                            <button type="button" class="btn btn-warning date-set"><i class="fa fa-calendar"></i></button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-md-3">Meridian Format</label>
                                <div class="col-md-4">
                                    <div data-date="2012-12-21T15:25:00Z" class="input-group date form_datetime-meridian">
                                        <input type="text" class="form-control" readonly="" size="16">
                                        <div class="input-group-btn">
                                            <button type="button" class="btn btn-danger date-reset"><i class="fa fa-times"></i></button>
                                            <button type="button" class="btn btn-info date-set"><i class="fa fa-calendar"></i></button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </section>
            </div>
        </div>
        <!--datetime picker end-->
        <!--time picker start-->
        <div class="row">
            <div class="col-md-12">
                <section class="panel">
                    <header class="panel-heading">
                        时间选择
                        <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                        </span>
                    </header>
                    <div class="panel-body">
                        <form class="form-horizontal  tasi-form" action="#">
                            <div class="form-group">
                                <label class="control-label col-md-3">Default Timepicker</label>
                                <div class="col-md-4">
                                    <div class="input-group bootstrap-timepicker">
                                        <input type="text" class="form-control timepicker-default">
                                        <span class="input-group-btn">
                                            <button class="btn btn-default" type="button"><i class="fa fa-clock-o"></i></button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">24hr Timepicker</label>
                                <div class="col-md-4">
                                    <div class="input-group bootstrap-timepicker">
                                        <input type="text" class="form-control timepicker-24">
                                        <span class="input-group-btn">
                                            <button class="btn btn-default" type="button"><i class="fa fa-clock-o"></i></button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </section>
            </div>
        </div>
        <!--time picker end-->
        <!--color picker start-->
        <div class="row">
            <div class="col-md-12">
                <section class="panel">
                    <header class="panel-heading">
                        拾色器
                        <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                        </span>
                    </header>
                    <div class="panel-body">
                        <form class="form-horizontal  tasi-form" action="#">
                            <div class="form-group">
                                <label class="control-label col-md-3">Default</label>
                                <div class="col-md-4">
                                    <input type="text" class="colorpicker-default form-control" value="#8fff00" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">RGBA</label>
                                <div class="col-md-4">
                                    <input type="text" class="colorpicker-rgba form-control" value="rgb(0,194,255,0.78)" data-color-format="rgba" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">As Component</label>
                                <div class="col-md-4 col-xs-11">
                                    <div data-color-format="rgb" data-color="rgb(255, 146, 180)" class="input-append colorpicker-default color">
                                        <input type="text" readonly="" value="" class="form-control">
                                        <span class="input-group-btn add-on">
                                            <button class="btn btn-white" type="button" style="padding: 8px">
                                                <i style="background-color: rgb(124, 66, 84);"></i>
                                            </button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </section>
            </div>
        </div>
        <!--color picker end-->
        <!--Spinner start-->
        <div class="row">
            <div class="col-md-12">
                <section class="panel">
                    <header class="panel-heading">
                        下拉列表
                        <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                        </span>
                    </header>
                    <div class="panel-body">
                        <form action="#" class="form-horizontal tasi-form">
                            <div class="form-group">
                                <label class="control-label col-md-3">Spinner 1</label>
                                <div class="col-md-2">
                                    <div id="spinner1">
                                        <div class="input-group input-small">
                                            <input type="text" class="spinner-input form-control" maxlength="3" readonly>
                                            <div class="spinner-buttons input-group-btn btn-group-vertical">
                                                <button type="button" class="btn spinner-up btn-xs btn-default">
                                                    <i class="fa fa-angle-up"></i>
                                                </button>
                                                <button type="button" class="btn spinner-down btn-xs btn-default">
                                                    <i class="fa fa-angle-down"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <span class="help-block">
                                        basic example
                                    </span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">Spinner 2</label>
                                <div class="col-md-2">
                                    <div id="spinner2">
                                        <div class="input-group input-small">
                                            <input type="text" class="spinner-input form-control" maxlength="3" readonly>
                                            <div class="spinner-buttons input-group-btn btn-group-vertical">
                                                <button type="button" class="btn spinner-up btn-xs btn-danger">
                                                    <i class="fa fa-angle-up"></i>
                                                </button>
                                                <button type="button" class="btn spinner-down btn-xs btn-danger">
                                                    <i class="fa fa-angle-down"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <span class="help-block">
                                        disabled state
                                    </span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">Spinner 3</label>
                                <div class="col-md-9">
                                    <div id="spinner3">
                                        <div class="input-group" style="width: 150px;">
                                            <input type="text" class="spinner-input form-control" maxlength="3" readonly>
                                            <div class="spinner-buttons input-group-btn">
                                                <button type="button" class="btn btn-default spinner-up">
                                                    <i class="fa fa-angle-up"></i>
                                                </button>
                                                <button type="button" class="btn btn-default spinner-down">
                                                    <i class="fa fa-angle-down"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <span class="help-block">
                                        with max value: 10
                                    </span>
                                </div>
                            </div>
                            <div class="form-group ">
                                <label class="control-label col-md-3">Spinner 4</label>
                                <div class="col-md-9">
                                    <div id="spinner4">
                                        <div class="input-group" style="width: 150px;">
                                            <div class="spinner-buttons input-group-btn">
                                                <button type="button" class="btn spinner-up btn-warning">
                                                    <i class="fa fa-plus"></i>
                                                </button>
                                            </div>
                                            <input type="text" class="spinner-input form-control" maxlength="3" readonly>
                                            <div class="spinner-buttons input-group-btn">
                                                <button type="button" class="btn spinner-down btn-danger">
                                                    <i class="fa fa-minus"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <span class="help-block">
                                        with step: 5
                                    </span>
                                </div>
                            </div>
                        </form>
                    </div>
                </section>
            </div>
        </div>
        <!--Spinner end-->
        <!--Advanced File Input start-->
        <div class="row">
            <div class="col-md-12">
                <section class="panel">
                    <header class="panel-heading">
                        高级文件上传控件
                        <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                        </span>
                    </header>
                    <div class="panel-body">
                        <form action="#" class="form-horizontal tasi-form">
                            <div class="form-group">
                                <label class="control-label col-md-3">Default</label>
                                <div class="col-md-4">
                                    <input type="file" class="default" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">Without input</label>
                                <div class="controls col-md-9">
                                    <div class="fileupload fileupload-new" data-provides="fileupload">
                                        <span class="btn btn-white btn-file">
                                            <span class="fileupload-new"><i class="fa fa-paper-clip"></i> Select file</span>
                                            <span class="fileupload-exists"><i class="fa fa-undo"></i> Change</span>
                                            <input type="file" class="default" />
                                        </span>
                                        <span class="fileupload-preview" style="margin-left: 5px;"></span>
                                        <a href="#" class="close fileupload-exists" data-dismiss="fileupload" style="float: none; margin-left: 5px;"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group last">
                                <label class="control-label col-md-3">Image Upload</label>
                                <div class="col-md-9">
                                    <div class="fileupload fileupload-new" data-provides="fileupload">
                                        <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
                                            <img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt="" />
                                        </div>
                                        <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
                                        <div>
                                            <span class="btn btn-white btn-file">
                                                <span class="fileupload-new"><i class="fa fa-paper-clip"></i> Select image</span>
                                                <span class="fileupload-exists"><i class="fa fa-undo"></i> Change</span>
                                                <input type="file" class="default" />
                                            </span>
                                            <a href="#" class="btn btn-danger fileupload-exists" data-dismiss="fileupload"><i class="fa fa-trash"></i> Remove</a>
                                        </div>
                                    </div>
                                    <span class="label label-danger">NOTE!</span>
                                    <span>
                                        Attached image thumbnail is
                                        supported in Latest Firefox, Chrome, Opera,
                                        Safari and Internet Explorer 10 only
                                    </span>
                                </div>
                            </div>

                        </form>
                    </div>
                </section>
            </div>
        </div>
        <!--Advanced File Input end-->
        <!--wysihtml5 start-->
        <div class="row">
            <div class="col-md-12">
                <section class="panel">
                    <header class="panel-heading">
                        WYSIWYG 编辑器
                        <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                        </span>
                    </header>
                    <div class="panel-body">
                        <form action="#" class="form-horizontal tasi-form">
                            <div class="form-group">
                                <label class="control-label col-md-3">WYSIHTML5 Editor</label>
                                <div class="col-md-9">
                                    <textarea class="wysihtml5 form-control" rows="10"></textarea>
                                </div>
                            </div>
                        </form>
                    </div>
                </section>
            </div>
        </div>
        <!--wysihtml5 end-->
        <!--Summernote start-->
        <div class="row">
            <div class="col-md-12">
                <section class="panel">
                    <header class="panel-heading head-border">
                        Summernote 编辑器
                    </header>
                    <div class="panel-body">
                        <div class="summernote">Hello Summernote</div>
                    </div>
                </section>
            </div>
        </div>
        <!--Summernote end-->
        <!-- page end-->
    </section>
</section>
<!--main content end-->

